<template>
  <!-- 投诉信息部分 -->
  <div class="complainInfo" ref="complainInfo">
    <!-- 容器 -->
    <div class="el-dialog">
      <!-- 导航栏 -->
      <div class="el-dialog-header">
        <div class="title">投诉求职者</div>
        <img
          src="../../assets/images/close.png"
          @click="closeComplainInfo"
          alt=""
        />
      </div>
      <!-- 内容 -->
      <div class="el-dialog-body">
        <!-- 线 -->
        <div class="green-line"></div>
        <div class="subtitle">* 投诉原因</div>
        <el-cascader
          v-model="value"
          :options="options"
          @change="handleComplainInfoChange"
          color="#1ECDB9"
          placeholder="请选择投诉原因"
        >
        </el-cascader>
        <div class="subtitle">* 投诉描述</div>
        <textarea
          name=""
          id=""
          v-model="describe"
          placeholder="请简单描述与应聘者沟通经过"
          maxlength="200"
        ></textarea>
        <div class="subtitle">投诉凭证</div>
        <div class="hint">
          请上传与应聘者沟通的聊天记录截图、通话记录截图等相关凭证，可大大加快处理速度哦！
        </div>
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
        >
          <i class="el-icon-upload"></i>
        </el-upload>
        <button>提交投诉</button>
      </div>
    </div>
  </div>
</template>

<script>
// 引用公用样式
import "../../assets/css/all.css";

export default {
  name: "ComplainInfo",
  data() {
    return {
      // 下拉框
      value: [],
      options: [
        {
          value: "phone",
          label: "对方手机号问题",
          children: [
            {
              value: "deadNumber",
              label: "空号/停机/不在服务区",
            },
            {
              value: "shutDown",
              label: "无人接听/关机/拒接",
            },
          ],
        },
        {
          value: "notMatch",
          label: "简历不符/简历作假",
          children: [
            {
              value: "underAge",
              label: "未成年",
            },
            {
              value: "schoolNotMatch",
              label: "学历不符",
            },
            {
              value: "ageNotMatch",
              label: "性别不符",
            },
          ],
        },
        {
          value: "advert",
          label: "垃圾广告",
          children: [
            {
              value: "vendition",
              label: "竞品销售",
            },
            {
              value: "market",
              label: "广告推销",
            },
          ],
        },
        {
          value: "manner",
          label: "态度恶劣",
          children: [
            {
              value: "abuse",
              label: "言语辱骂",
            },
            {
              value: "molest",
              label: "恶意骚扰",
            },
          ],
        },
        {
          value: "mailing",
          label: "重复投递",
          children: [
            {
              value: "signUp",
              label: "重复报名",
            },
            {
              value: "maliciousRegistration",
              label: "恶意报名",
            },
          ],
        },
        {
          value: "other",
          label: "其他",
          children: [
            {
              value: "hometown",
              label: "异地报名",
            },
          ],
        },
      ],
      // 文本域
      describe: "",
    };
  },
  methods: {
    // 显示投诉信息
    showComplainInfo() {
      this.$refs.complainInfo.style.display = "block";
    },
    // 隐藏投诉信息
    closeComplainInfo() {
      this.$refs.complainInfo.style.display = "none";
    },
    // 投诉原因下拉框
    handleComplainInfoChange() {},
  },
};
</script>

<style scoped>
.complainInfo {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  overflow: scroll;
  background: rgba(0, 0, 0, 0.6);
  z-index: 110;
  display: none;
}
/* 容器 */
.complainInfo .el-dialog {
  max-width: 520px;
  height: 700px;
  background: white;
  padding: 0 40px;
  margin-top: 25px;
}
/* 导航栏 */
.complainInfo .el-dialog-header {
  height: 30px;
  padding-top: 40px;
  color: #172238;
  font-size: 24px;
  display: flex;
  justify-content: space-between;
}
.complainInfo .el-dialog-header img {
  cursor: pointer;
}
/* 内容 */
.complainInfo .el-dialog-body {
  position: relative;
  padding: 20px 0;
  text-align: left;
}
/* 线 */
.complainInfo .el-dialog-body .green-line {
  width: 4px;
  height: 16px;
  background: #1ecdb9;
  position: absolute;
  top: -22px;
  left: -20px;
}
/* 标题 */
.complainInfo .el-dialog-body .subtitle {
  color: #172238;
  font-size: 18px;
  margin: 20px 0 11px 0;
}
.complainInfo .el-dialog-body .el-cascader {
  width: 100%;
}
.complainInfo .el-dialog-body textarea {
  min-width: 100%;
  max-width: 100%;
  width: 100px;
  max-height: 100px;
  color: #606266;
  text-indent: 1em;
  padding: 5px 0 15px;
  transition: all ease 0.6s;
  outline: none;
  border-radius: 5px;
  border: 1px solid #dcdfe6;
}
.complainInfo .el-dialog-body textarea:focus {
  border: 1px solid #1ecdb9;
  transition: all ease 0.6s;
}
.complainInfo .el-dialog-body .hint {
  color: #666;
  line-height: 26px;
  font-size: 14px;
}
.complainInfo .el-dialog-body .el-upload {
  margin: 20px 0;
}
.complainInfo .el-dialog-body button {
  margin-top: 10px;
  width: 100px;
  height: 40px;
  color: white;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  background: #1ecdb9;
  cursor: pointer;
}
</style>